<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>hoyo</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	body{
	    		background-color: #f1f3f7;
	    	}
	    	.container-left{
	    		width: 220px;
	    		margin: 0;
	    		padding: 0;
	    		background-color: #FFFFFF;
	    		height: 100%;
	    		box-shadow: #c7ced1 0 0 5px;
	    		z-index:100;
	    	}
	    	.left-bc{
	    		width: 100%;
	    		height: 90px;
	    		background-image: url(/hoyo/img/admin-logo.png);
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    	.left-ul{
	    		list-style: none;
	    		margin: 0;
	    		padding: 0;
	    	}
	    	.left-ul li{
	    		display: block;
	    		width: 100%;
	    		height: 45px;
	    		text-align: center;
	    		font-size: 14px;
	    		font-family: "微软雅黑";
	    		position: relative;
	    		border-top: 1px solid transparent;
	    		border-bottom: 1px solid transparent;
	    		box-sizing: content-box;
	    	}
	    	.li-icon{
	    		display: inline-block;
	    		background-color: transparent;
	    	}

	    	.li-font{
	    		display: inline-block;
	    		vertical-align: top;
	    		line-height: 45px;
	    		height: 45px;
	    		padding-left: 19px;
	    		width:75px;
	    		background-color: transparent;
	    	}
	    	.svg-icon{
	    		width:23px;
	    		height: 23px;
	    		margin-top: 12px;
	    	}
			.left-li-hover{
				background-color: #37c8f7;
				border-radius: 30px;
				height: 45px;
				width: 160px;
				margin-left: 30px;
				color: #FFFFFF;
			}
			.container-right{
				position: relative;
				margin: 0 0 0 220px;
				height: 100%;
				padding-top: 20px;
				z-index:11;
			}
			.total-info{
				background-color: #FFFFFF;
				min-height: 160px;
				padding: 30px 0;
				text-align: center;
				box-shadow: #c7ced1 0 0 2px;
				margin-bottom: 20px !important;
				border-radius: 6px;
			}
			.total-info-div{
				height: 100px;
				padding-top: 15px;
				border-right: 1px solid #E5E9EF;
			}
			.total-info-icon{
				width: 45px;
				height: 45px;
			}
			.total-info-div-left{
				display: inline-block;
				margin-right: 12px;
				vertical-align: top;
				margin-top: 5px;
			}
			.total-info-div-right{
				display: inline-block;
				height: 100px;
			}
			.div-name{
				font-size: 16px;
			}
			.number{
				font-size: 36px;
				text-align: left;
			}
			.info-content-title{
				height: 60px;
				margin:0 15px;
				margin-bottom: 10px;
			}
			.video-upload{
				background-color: #FFFFFF;
				box-shadow: #c7ced1 0 0 2px;
				border-radius: 6px;
				margin-bottom: 20px !important;
				padding-bottom: 10px;
			}
			.inline-block{
				display: inline-block;
			}
			.row{
				margin: 0;
			}
			.info-content-title-icon{
				width: 34px;
				height: 34px;
			}
			.content-font{
				height: 60px;
				line-height: 60px;
				vertical-align: top;
				font-family: "微软雅黑";
				font-size: 16px;
			}
			.content-logo{
				margin-top: 10px;
				margin-right: 8px;
			}
			.content-btn{
				border-color: #ccc;
				line-height: 60px;
			}
			.main-info{
				height: 180px;
				overflow: hidden;
			}
			.main-video-pic{
				width: 160px;
				height: 120px;
			}
			.clear{
				margin: 0;
				padding: 0;
			}
			.info-pic{
				width: 190px;
				height: 120px;
			}
			.main-info-content{
				font-family: "微软雅黑";
			}
			.main-info-content p{
				padding:0;
				margin: 0;
				padding-top: 3px;
			}
			.info-intro{
				height: 40px;
				overflow: hidden;
			}
			.title{
				display: inline-block;
				height: 20px;
				overflow: hidden;
			}
			.main-info-icon{
				display: inline-block;
				margin-right: 6px;
			}
			.main-info-font{
				display: inline-block;
				line-height: 24px;
				height: 24px;
				width: 160px;
				overflow: hidden;
			}
			.main-info-icon .icon{
				vertical-align: super;
				margin-top: 3px;
			}
			.main-info-div{
				padding: 6px 3px;
			}
			.main-info-title{
				padding: 2px 0;
				height: 24px;
			}
			.main-info-uploader{
				padding: 2px 0;
				height: 24px;
			}
			.video-tousu{
				background-color: #FFFFFF;
				box-shadow: #c7ced1 0 0 2px;
				border-radius: 6px;
				margin-bottom: 20px !important;
				padding-bottom: 10px;
			}
			.video-report{
				background-color: #FFFFFF;
				box-shadow: #c7ced1 0 0 2px;
				border-radius: 6px;
				margin-bottom: 20px !important;
				padding-bottom: 10px;
				min-height: 361px;
			}
			.danmu-tr{
				height: 40px;
			}
			.danmu-name{
				display: inline-block;
				line-height: 30px;
				height: 30px;
				vertical-align: super;
			}
			.danmuReport-user1{
				width: 80px;
				height: 36px;
				line-height: 34px;
				overflow: hidden;
				display: inline-block;
				box-sizing: border-box;
				padding: 3px 2px;
				text-align: center;
			}
			.danmuReport-user2{
				width: 80px;
				height: 36px;
				overflow: hidden;
				display: inline-block;
				box-sizing: border-box;
				line-height: 34px;
				padding: 3px 2px;
				text-align: center;
			}
			.danmuReport-content{
				width: 230px;
				height: 36px;
				line-height: 34px;
				overflow: hidden;
				display: inline-block;
				box-sizing: border-box;
				padding: 3px 2px;
			}
			.danmuReport-reason{
				width: 230px;
				height: 36px;
				overflow: hidden;
				display: inline-block;
				box-sizing: border-box;
				line-height: 34px;
				padding: 3px 2px;
			}
			.danmuReport-action{
				width: 200px;
				height: 36px;
				overflow: hidden
				display: inline-block;
				box-sizing: border-box;
				line-height:30px;
				padding: 3px 2px;
			}
			.danmu-table>tr>td{
				padding: 0;
				margin: 0;
				height: 40px;
			}
			.danmu-table{
				margin-left: 15px !important;
				margin-right: 15px !important;
				width: 920px;
			}

	    	
	    	/*
	    	 * 
	    	 */
	    	.movie-info{
				background-color: #FFFFFF;
				height: auto;
				padding: 20px 0;
				box-shadow: #c7ced1 0 0 2px;
				margin-bottom: 20px !important;
				border-radius: 6px;
			}
			.movie-poster{
				width: 190px;
				height: 120px;
			}
			.search-field{
				margin-bottom: 30px;
			}
			.movie-type{
				display:inline-block;
				margin-right: 10px;
				height: 40px;
				line-height: 40px;
				font-size: 12px;
				color: #99a2aa;
				font-family: "微软雅黑";
			}
			.movie-time{
				height: 40px;
				line-height: 40px;
				font-size: 12px;
				color: #99a2aa;
				font-family: "微软雅黑";
			}
			.movie-content{
				height: 40px;
			}
			.upload-type{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				font-size: 12px;
				color: #99a2aa;
				font-family: "微软雅黑";
				margin-right: 10px;
			}
			.movie-uploader{
				height: 40px;
				font-family: "微软雅黑";
			}
			.upload-title{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				font-size: 16px;
				font-family: "微软雅黑";
				margin-right: 10px;
			}
			.upload-action{
				border: none;
				color: #99a2aa;
			}
			.movie-title{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				font-size: 16px;
				font-family: "微软雅黑";
			}
			.movie-total-info{
				display: inline-block;
				height: 24px;
				width: 80px;
			}
			.total-number{
				display: inline-block;
				height: 24px;
				line-height: 24px;
			}
			.total-icon{
				margin-top: 5px;
				vertical-align: top;
			}
			.movie-total{
				margin-top: 30px;
			}
			.movie-total2{
				margin-top: 10px;
			}
			.movie{
				margin-bottom:40px;
			}
	    </style>
	</head>
	<body style="height: 100%;">
		<div class="container-left" style="height: 100%; position: fixed;">
		<div class="left-bc"></div>
		<div>
			<ul class="left-ul">
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shouye2-copy"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a></div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-weibiaoti3"></use>
								</svg>
						</div>
						<div class="li-font" ><a href="/hoyo/admin/upload">投稿管理</a></div>
					</div>
				</li>
				<li>
					<div class="left-li-hover">
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shipin7"></use>
								</svg>
						</div>
						<div class="li-font">视频管理</div>
					</div>
				</li>
				<li><div>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-tousu"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/catalog">投诉管理</a></div></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-danmuliang"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/bullet">弹幕管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-icon47-copy"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/comment">评论管理</a></div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-icon_tip_off"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/report">举报管理</a></div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-quanxian-copy-copy"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/channel">频道管理</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
		<div class="container container-right">
			<div class="my-container">
				<div class="row movie-info" id="catalogs">
					<div class="search-field row">
						<div class="col-lg-6">
							<button class="btn btn-info" type="button">
						  		全部视频<span class="badge">{{pageInfo.total}}</span>
							</button>
						</div>
						
						<div class="col-lg-4">
							<div class="input-group">
						        <input type="text" class="form-control" placeholder="Search for..." id="keyword">
						        <span class="input-group-btn">
						          <button class="btn btn-default" type="button" v-on:click="search()">
						        	  <span class="glyphicon glyphicon-search"></span> 
						          </button>
						        </span>
							</div>
						</div>
						<div class="col-lg-2">
							<div class="btn-group">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								   <span id="channelName">频道</span><span class="caret"></span>
								</button>
								  <ul class="dropdown-menu">
								  	<li><a onclick="switchChannel(-1, '全部')">全部</a></li>
								    <li th:each="channel : ${channels}"><a th:onclick="'switchChannel('+${channel.id}+',\''+${channel.channelName}+'\')'" th:text="${channel.channelName}"></a></li>
								  </ul>
							</div>
						</div>
					</div>
				
					<div class="movie row" v-for="catalog in pageInfo.list">
						<div class="col-lg-3">
							<img v-bind:src="catalog.catalogPoster"  class="img-rounded movie-poster" />
						</div>
						<div class="col-lg-6">
							<div class="movie-content">
								<span class="movie-type">{{catalog.channelName}}</span>
								<span class="movie-title">{{catalog.catalogName}}</span>
							</div>
							<div class="movie-time">{{dateFormat(catalog.createTime)}}</div>
							<div class="movie-uploader">
								<span class="upload-type">上传by</span>
								<span class="upload-title">{{catalog.nickname}}</span>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-default dropdown-toggle  upload-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									   <span class="glyphicon glyphicon-option-horizontal"></span> 
									</button>
									  <ul class="dropdown-menu">
									    <li v-if="catalog.isChecked"><a v-if="catalog.isShowed" v-on:click="offLoadCatalog(catalog.id)">下架视频</a>
									    	<a v-else v-on:click="onLoadCatalog(catalog.id)">上架视频</a></li>
									    <li><a v-on:click="deleteCatalog(catalog.id)">删除视频</a></li>
									  </ul>
								</div>
							</div>
						</div>
						<div class="col-lg-3">
							<div class="movie-total">
								<span class="movie-total-info">
									<svg class="icon total-icon" aria-hidden="true">
									  <use xlink:href="#icon-shipin4-copy"></use>
									</svg>
									<span class="total-number">
										{{catalog.playAmount}}
									</span>
								</span>
								<span class="movie-total-info">
									<svg class="icon total-icon" aria-hidden="true">
									  <use xlink:href="#icon-icon47-copy"></use>
									</svg>
									<span class="total-number">
										{{catalog.commentAmount}}
									</span>
								</span>
							</div>
							<div class="movie-total2">
								<span class="movie-total-info">
									<svg class="icon total-icon" aria-hidden="true">
									  <use xlink:href="#icon-danmuliang"></use>
									</svg>
									<span class="total-number">
										{{catalog.danmuAmount}}
									</span>
								</span>
								<span class="movie-total-info">
									<svg class="icon total-icon" aria-hidden="true">
									  <use xlink:href="#icon-shoucang-shoucang"></use>
									</svg>
									<span class="total-number">
										{{catalog.collectAmount}}
									</span>
								</span>
							</div>
							<div class="movie-total2">
								<span class="movie-total-info">
									<span v-if="catalog.isChecked" style="color: #33ff00">
										已审核
									</span>
									<span v-else style="color: #ff0000">
										未审核
									</span>
								</span>
								<span class="movie-total-info">
									<span v-if="catalog.isShowed" style="color: #33ff00">
										已上架
									</span>
									<span v-else style="color: #ffaa00">
										未上架
									</span>
								</span>
							</div>
						</div>
					</div>
					<div class="row" v-if="pageInfo.size>0">
						<nav aria-label="Page navigation" style="margin-left: 100px;">
							<ul class="comment-bottom-page pagination pagination-lg"
								id="commentFooter">
								<li v-if="!pageInfo.isFirstPage" v-on:click="getCatalogs(1)">
									<a style="cursor: pointer">首页</a>
								</li>
								<li v-if="pageInfo.hasPreviousPage" v-on:click="getCatalogs(pageInfo.pageNum-1)">
									<a style="cursor: pointer">上一页</a>
								</li>
								<li v-for="pageNumber in pageInfo.navigatePageNums">
									<a v-if="pageInfo.pageNum!=pageNumber" v-on:click="getCatalogs(pageNumber)" style="cursor: pointer">{{pageNumber}}</a> 
									<span v-else>{{pageNumber}}</span></li>
								<li v-if="pageInfo.hasNextPage" v-on:click="getCatalogs(pageInfo.pageNum+1)">
									<a style="cursor: pointer">下一页</a>
								</li>
								<li v-if="!pageInfo.isLastPage" v-on:click="getCatalogs(pageInfo.pages)">
									<a style="cursor: pointer">尾页</a>
								</li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			style="padding-top: 200px;" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">通知</h4>
					</div>
					<div class="modal-body" id="messageBody">确定执行该动作吗？</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script src="/hoyo/js/vue1.0.26.js"></script>
    <script src="/hoyo/js/vue-strap.min.js"></script>
    <script>
	    var catalogVM = new Vue({
			el: "#catalogs",
			data:{
				pageInfo: {},
				channelId: -1,
				isSearchOn: false,
				keyword:""
			},
			created: function(){
				var vm = this;
				$.get({
					url:"/hoyo/admin/catalog/catalogs",
					data:"pageNum=1&pageSize=5",
					success:function(data){
						var result = JSON.parse(data);
						console.log(result);
						if(result.success){
							vm.pageInfo = result.pageInfo;
						}
					}
				});
			},
			methods:{
				dateFormat: function(time){
					var date = new Date();
					date.setTime(time);
					return date.toLocaleString();
				},
				getCatalogs: function(pageNum){
					var vm = this;
					if(this.isSearchOn){
						$.get({
							url:"/hoyo/admin/catalog/search",
							data:"keyword="+vm.keyword+"&pageNum="+pageNum+"&pageSize=5",
							success:function(data){
								var result = JSON.parse(data);
								console.log(result);
								if(result.success){
									vm.pageInfo = result.pageInfo;
								}else{
									
								}
							}
						});
					}else{
						if(this.channelId == -1){
							$.get({
								url: "/hoyo/admin/catalog/catalogs",
								data:"pageNum="+pageNum+"&pageSize=5",
								success:function(data){
									var result = JSON.parse(data);
									console.log(result);
									if(result.success){
										vm.pageInfo = result.pageInfo;
									}else{
										
									}
								}
							});
						}else{
							$.get({
								url: "/hoyo/admin/channel/catalogs",
								data:"channelId="+vm.channelId+"&pageNum="+pageNum+"&pageSize=5",
								success:function(data){
									var result = JSON.parse(data);
									console.log(result);
									if(result.success){
										vm.pageInfo = result.pageInfo;
									}else{
										
									}
								}
							});
						}
					}
				},
				offLoadCatalog: function(id){
					var vm = this;
					$.get({
						url:"/hoyo/admin/catalog/offLoad",
						data:"catalogId="+id,
						success: function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								Messenger.show("视频下架成功");
								vm.pageInfo = result.pageInfo;
							}else{
								Messenger.show("视频下架失败，服务器发生未知错误");
							}
						}
					});
				},
				onLoadCatalog :function(id){
					var vm = this;
					$.get({
						url:"/hoyo/admin/catalog/onLoad",
						data:"catalogId="+id,
						success: function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								Messenger.show("视频上架成功");
								vm.pageInfo = result.pageInfo;
							}else{
								Messenger.show("视频上架失败，服务器发生未知错误");
							}
						}
					});
				},
				deleteCatalog: function(id){
					var vm = this;
					$.get({
						url:"/hoyo/admin/catalog/remove",
						data:"catalogId="+id,
						success: function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								Messenger.show("视频删除成功");
								vm.pageInfo = result.pageInfo;
							}else{
								Messenger.show("视频删除失败，服务器发生未知错误");
							}
						}
					});
				},
				search: function(){
					var keyword = $("#keyword").val().trim();
					if("" == keyword){
						return ;
					}
					this.isSearchOn = true;
					this.keyword = keyword;
					this.getCatalogs(1);
				}
			}
		});   
	    
	    var Messenger = {
    		show: function(message){
    			$("#messageBody").html(message);
    			$("#myModal").modal("show");
    		}
    	}
	    
    	function switchChannel(channelId, channelName){
    		if(catalogVM.channelId == channelId){
    			return ;
    		}
    		$("#channelName").html(channelName);
    		catalogVM.isSearchOn = false;
			catalogVM.channelId = channelId;
			catalogVM.getCatalogs(1);
		}
    </script>
</html>
